<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
            #box{
                  width: 220px;
                  height: 220px;
                  position: relative;
            }
            #box::after{
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  content: "";
                  z-index: 2;
                  background: linear-gradient(180deg,rgba(119,255,233,.05),rgba(0,93,70,.05));
            }

      </style>
</head>
<body>
      <div id="box">

            <img src="https://img12.360buyimg.com/n7/jfs/t1/142/31/6082/275683/5ba0baedEe0f0db20/ee999782eb5a8a51.jpg" alt="">

      </div>
</body>
</html>